<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<script>
selection_test(
    '<div contenteditable>foo|<span style="display:inline-block">bar</span>baz</div>',
    selection => selection.modify('move', 'right', 'character'),
    '<div contenteditable>foo<span style="display:inline-block">b|ar</span>baz</div>',
    'Move right into inline block');

selection_test(
    '<div contenteditable>foo<span style="display:inline-block">|bar</span>baz</div>',
    selection => selection.modify('move', 'left', 'character'),
    '<div contenteditable>fo|o<span style="display:inline-block">bar</span>baz</div>',
    'Move left out of inline block');

selection_test(
    '<div contenteditable>foo<span style="display:inline-block">bar</span>|baz</div>',
    selection => selection.modify('move', 'left', 'character'),
    '<div contenteditable>foo<span style="display:inline-block">ba|r</span>baz</div>',
    'Move left into inline block');

selection_test(
    '<div contenteditable>foo<span style="display:inline-block">bar|</span>baz</div>',
    selection => selection.modify('move', 'right', 'character'),
    '<div contenteditable>foo<span style="display:inline-block">bar</span>b|az</div>',
    'Move right out of inline block');

selection_test(
    '<div contenteditable>foo|<span style="display:inline-block;width:1em;height:1em;"></span>bar</div>',
    selection => selection.modify('move', 'right', 'character'),
    '<div contenteditable>foo<span style="display:inline-block;width:1em;height:1em;">|</span>bar</div>',
    'Move right into empty inline block');

selection_test(
    '<div contenteditable>foo<span style="display:inline-block;width:1em;height:1em;">|</span>bar</div>',
    selection => selection.modify('move', 'left', 'character'),
    '<div contenteditable>foo|<span style="display:inline-block;width:1em;height:1em;"></span>bar</div>',
    'Move left out of empty inline block');

selection_test(
    '<div contenteditable>foo<span style="display:inline-block;width:1em;height:1em;"></span>|bar</div>',
    selection => selection.modify('move', 'left', 'character'),
    '<div contenteditable>foo<span style="display:inline-block;width:1em;height:1em;">|</span>bar</div>',
    'Move left into empty inline block');

selection_test(
    '<div contenteditable>foo<span style="display:inline-block;width:1em;height:1em;">|</span>bar</div>',
    selection => selection.modify('move', 'right', 'character'),
    '<div contenteditable>foo<span style="display:inline-block;width:1em;height:1em;"></span>|bar</div>',
    'Move right out of empty inline block');
</script>
